﻿@inject FwProject.Shop.Views.WebRootUrl WebRootUrl
@{
    ViewBag.Title = "商品列表";

}
@section styles{
    @*<link href="~/static/css/Ztree.css" type="text/css" rel="stylesheet" />
        <link href="~/static/css/metroStyle.css" type="text/css" rel="stylesheet" />
        <link href="~/static/css/public.css" type="text/css" rel="stylesheet" />*@
    <link href="~/static/css/client.css" type="text/css" rel="stylesheet" />
}
<style>
    a {
        text-decoration: none;
    }

    .pic_logo {
        height: 48px;
        /*width: 48px;
        line-height: 48px !important;*/
    }

    .layui-table-cell {
        height: 48px !important;
        line-height: 48px !important;
    }

    .category_search {
        width: 350px;
        border: 1px solid #333331;
        position: absolute;
        z-index: 99999;
        background-color: white;
    }

    .content_title {
        text-align: center;
        font-size: 16px;
        padding: 10px 0;
        color: #afacb3;
    }

    .content_list {
        height: 240px;
        position: relative;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .content_item {
        height: 45px;
        line-height: 45px;
        margin: 10px 0;
        cursor: pointer;
        padding-left: 5px;
        transition: background ease-in-out .15s, color ease-in-out .15s;
    }

        .content_item.active {
            background: #00a0e9;
            color: #fff;
        }

        .content_item:hover {
            background: #33b3ed;
            color: #fff;
        }
</style>
<div class="layui-fluid layui-content">
    <div class="layui-title layui-clear layui-row">
        <h2 class="layui-col-md10 layui-col-sm9 layui-col-xs7">@ViewBag.Title</h2>
        <div class="layui-col-md2 layui-col-sm3 layui-col-xs5 layui-nav-item">
            <a class="layui-btn layui-btn-xs" onclick="top.NewTab(10086,'增加商品','@Url.Action("SelectType")')">增加商品</a>
            <button type="button" class="layui-btn layui-btn-xs" onclick="Export()"><i class="layui-icon">&#xe63c;</i>导出 </button>
        </div>
    </div>
    <div class="layui-eacher layui-row layui-clear">
        <form class="layui-clear">
            <div class="layui-form layui-clear">
                <div class="layui-form-group layui-col-pc2 layui-col-md3 layui-col-sm5 layui-col-xs6">
                    <label class="layui-form-label">模式：</label>
                    <div class="layui-input-block">
                        <enums asp-name="ShopProductFlag" asp-id="ShopProductFlag" asp-valuetype="2" asp-isnull="true" asp-enum="typeof(FwProject.ShoppingMall.Shop.ShopProductFlag)"></enums>
                    </div>
                </div>
                <div class="layui-col-md5 layui-col-pc5 layui-col-lg5 layui-form-group">
                    <label class="layui-form-label">分类：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="producttype" id="producttype" />
                    </div>
                    <div class="category_search" style="display:none;">
                        <div class="content_title">
                            <span>分类搜索</span>
                        </div>
                        <div class="layui-tab" lay-filter="shopproductType">
                            <ul class="layui-tab-title">
                                <li class="layui-this">商品分类</li>
                            </ul>
                            <div class="layui-tab-content" style="padding:0;">
                                <div class="layui-tab-item layui-show content_list" id="parentType">
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="ShopTypeId" value="" />
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-pc7 layui-col-lg7 layui-form-group">
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="keyword" id="keyword" placeholder="请输入商品名称或编号" />
                    </div>
                </div>
                <div class="layui-col-md1">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="search" type="button"> 搜索 </button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-data layui-table-container">
        <table class="layui-hide layui-table" id="layui-table" lay-filter="table"></table>
    </div>
</div>
<div id="Layer_ajax"></div>

<script type="text/html" id="barDemo">
    <a class="layui-btn" lay-event="edit">编辑</a>
</script>
@section scripts{
    @*
        <script src="~/Theme/js/content.min.js?v=1.0.0"></script>*@
    <script src="~/static/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.excheck.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.exedit.js" type="text/javascript"></script>

    @*
        <script src="~/Theme/js/plugins/layer/laydate/laydate.js"></script>*@
    <script type="text/javascript">
        var tableH = $(".layui-table-container").height();
        layui.use(['form', 'layedit', 'laydate', 'tree', 'table', 'layer', 'upload','element'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , table = layui.table
                , upload = layui.upload
                , element = layui.element;


            table.render({
                elem: "#layui-table",
                url: '/Commodity/GetCommodityData',
                cellMinWidth: 26,
                height: tableH,

                cols: [[
                    { type: 'checkbox' },
                    {
                        field: 'imagePic', title: '商品图片', templet: function (d) {
                            var img = "<img class='pic_logo' src='@WebRootUrl.WebImageRootUrl()/" + d.imagePic + "'/>";
                            return 'imagePic', img;
                        }, width: 100, align: 'center'
                    },
                    { field: 'productName', title: '商品名称' },
                    { field: 'productNumber', title: '商品编号' },
                    { field: 'category', title: '分类' },
                    {
                        field: 'shopProductFlag', title: '销售模式', templet: function (d) {
                            var flag=""
                            switch (d.shopProductFlag) {
                                case 0:
                                    flag = "正常";
                                    break;
                                case 1:
                                    flag = "秒杀";
                                    break;
                                case 2:
                                    flag = "特价";
                                    break;
                                case 3:
                                    flag = "推荐";
                                    break;
                                default:
                            }
                            return 'shopProductFlag', flag;
                    }},
                    { field: 'spcemarketPrice', title: '销售价格' },
                    { field: 'isGrounding', title: '上架' },
                    { field: 'brands', title: '品牌' },
                    { title: '操作', width: 213, align: 'center', toolbar: '#barDemo' }
                ]],
                id: "idTest",
                //limits: [1, 2, 3, 5, 6],
                page: true,
                size:"lg",
                done: function (res, curr, count) {
                    $(".layui-table tbody").find("img").on('error', function () {
                        $(this).attr('src', "/images/photo_3.jpg");
                    })
                }
            });


            //监听工具条
            table.on('tool(table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {

                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    top.NewTab(10087, "修改商品", "/Commodity/Edit?id=" + data.id);
                }
            });
            $('#search').on('click', function () {
                table.reload('idTest', {
                    where: {
                        shopProductFlag: $('#ShopProductFlag').val(),
                        keyword: $('#keyword').val(),
                        shopTypeId: $('#ShopTypeId').val()
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })

            })

            $("#parentType").on('click', '.content_item', function () {
                var t = $(this).find(":header").text();
                var id = $(this).find(":input").val();


                element.tabDelete('shopproductType', '10086');
                $.get("/ShopType/GetTypeJson?id=" + id, function (data) {
                    if (data.success) {
                        if (data.result.length > 0) {
                            var content = '';
                            for (var i = 0; i < data.result.length; i++) {
                                content = content + '<div class="content_item"><h4>' + data.result[i].typeName + '</h4><input type="hidden" value="' + data.result[i].id + '" /></div>';
                            }
                            element.tabAdd('shopproductType', {
                                title: t
                                , content: content //支持传入html
                                , id: '10086'
                            });
                            element.tabChange('shopproductType', '10086');
                        }
                    }
                })



            })


            $(".layer-open").on('click', function () {
                layer.closeAll();
                layer.msg('加载中', {
                    icon: 16
                    , shade: 0.01
                });
                var url = $(this).data('url');
                var title = $(this).data('title')
                if (!!url) {
                    url = url + ((url.indexOf("?") > -1) ? "&r=" : "?r=") + Math.random();//避免缓存
                    LayerOpen(title, url);
                }
            })

            function LayerOpen(title, url) {
                var open = layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1400px', '800px'],
                    content: url,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index)//确定两个页面的父子关系
                    },
                    end: function () {
                        //销毁后重新加载
                        table.reload('idTest', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        })
                    }
                });
                layer.full(open);
            }
        });
        $('.layui-tab-content').on('click', '.content_item', function () {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
            var id = $(this).find(":input").val();
            var t = $(this).find(":header").text();
            $('#ShopTypeId').val(id);
            $('#producttype').val(t);



        })

        $("#layui-Area").click(function () {
            $(".layui-Area .layui-Area-hide").toggleClass("layui-Area-show")
            $(this).parent(".layui-form-select").toggleClass("layui-form-selected");
        });

        $(".layui-Area").mouseleave(function () {
            $(".layui-Area .layui-Area-hide").removeClass("layui-Area-show")
        })

        $("#producttype").on('click',function (event) {
            event.stopPropagation();//阻止事件冒泡
            $(".category_search").toggle();
            var flag = true;
            $(document).bind("click", function (e) {//点击空白处，设置的弹框消失
                var target = $(e.target);
                if (target.closest('.category_search').length == 0 && flag == true) {
                    $('.category_search').hide();
                    flag = false;
                }
            });
        });
        $("#producttype").bind("input propertychange", function (event) {
            if ($("#producttype").val() == "" || $("#producttype").val() == null) {
                $('#ShopTypeId').val("");
            }
        });


        $(document).ready(function () {
            $.get("/ShopType/GetTypeJson", function (data) {
                if (data.success) {
                    if (data.result.length>0) {
                        for (var i = 0; i < data.result.length; i++) {
                            $("#parentType").append('<div class="content_item"><h4>' + data.result[i].typeName + '</h4><input type="hidden" value="' + data.result[i].id +'" /></div>');
                        }
                    }
                }
             })

        });

        function Export() {
            var shopTypeid = $('#shopTypeid').val();
            var keyword = $('#keyword').val();

            window.location.href = "/Commodity/ExportCommodity?shopTypeid=" + shopTypeid + "&keyword=" + keyword;
        }
    </script>
}